<template>
  <div>
    <label style="font-size: 30px; margin-left: 45%">犬只领养</label>
    <el-table :data="tableData" style="width: 100%;" align="center" >
      <el-table-column label="犬只照片" width="250px" align="center">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper" style="height:130px" align="center">
            <img :src="scope.row.photo" class="avatar" />
          </div>
        </template>
      </el-table-column>
      <!-- :data="tableData" -->
      <el-table-column
        label="年龄"
        width="100"
        show-overflow-tooltip
        align="center"
      >
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium">{{ scope.row.age }}</el-tag>
          </div>
        </template>
      </el-table-column>

      <el-table-column label="体型" width="130" align="center">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium">
              {{ scope.row.type }}
            </el-tag>
          </div>
        </template>
      </el-table-column>

      <el-table-column label="体长" width="130" align="center">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium">
              {{ scope.row.longs }}
            </el-tag>
          </div>
        </template>
      </el-table-column>

      <el-table-column label="体重" width="130" align="center">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium">
              {{ scope.row.weight }}
            </el-tag>
          </div>
        </template>
      </el-table-column>

      <el-table-column label="身高" width="130" align="center">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium">
              {{ scope.row.height }}
            </el-tag>
          </div>
        </template>
      </el-table-column>

      <el-table-column label="领养操作" width="130" align="center">
        <template slot-scope="scope">
          <el-button size="mini" lock-scroll @click.native.prevent="adopt(scope.row)">
            领养申请
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 点击查看详情的弹出框 -->
    <el-dialog title="领养申请" :visible.sync="dialogVisible" width="40%">
      <el-form ref="form" :model="form" label-width="100px">
        <el-form-item label="证件正面照片" style="margin-top: 15%">
          <!-- 证件正面照片 -->
          <el-upload
            class="avatar-uploader"
            action="http://localhost:5051/image/upload"
            :show-file-list="false"
            :on-success="handleIcdImage"
            style="margin-left: 40%; margin-top: -13%"
          >
            <img v-if="form.icd_image" :src="form.icd_image" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>

        <el-form-item label="本人半身照片" style="margin-top: 15%">
          <!-- 本人半身照片 -->
          <el-upload
            class="avatar-uploader"
            action="http://localhost:5051/image/upload"
            :show-file-list="false"
            :on-success="handlePersonImage"
            style="margin-left: 40%; margin-top: -13%"
          >
            <img
              v-if="form.person_image"
              :src="form.person_image"
              class="avatar"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>

        <el-form-item label="犬主姓名">
          <el-input
            v-model="form.uname"
            style="margin-left: 40%; width: 42.5%"
          ></el-input>
        </el-form-item>

        <el-form-item label="证件类型">
          <template>
            <el-input
              v-model="form.ID_type"
              disabled
              style="margin-left: 40%; width: 42.5%"
            ></el-input>
          </template>
        </el-form-item>

        <el-form-item label="证件号码">
          <el-input
            v-model="form.icd"
            style="margin-left: 40%; width: 42.5%"
            placeholder="身份证号码"
          ></el-input>
        </el-form-item>

        <el-form-item label="性别">
          <el-input
            v-model="form.sex"
            style="margin-left: 40%; width: 42.5%"
          ></el-input>
        </el-form-item>

        <el-form-item label="民族">
          <el-input
            v-model="form.ethnic"
            style="margin-left: 40%; width: 42.5%"
          ></el-input>
        </el-form-item>

        <el-form-item label="户籍地址">
          <el-input
            v-model="form.domicile_address"
            style="margin-left: 40%; width: 42.5%"
            placeholder="身份证上的地址"
          ></el-input>
        </el-form-item>

        <el-form-item label="联系电话">
          <el-input
            v-model="form.tel"
            style="margin-left: 40%; width: 42.5%"
          ></el-input>
        </el-form-item>

        <el-form-item label="现住地">
          <el-input
            v-model="form.now_address"
            style="margin-left: 40%; width: 42.5%"
          ></el-input>
        </el-form-item>

        <el-form-item label="详细地址">
          <el-input
            v-model="form.detailed_address"
            style="margin-left: 40%; width: 42.5%"
          ></el-input>
        </el-form-item>

        <el-form-item label="证明材料" style="margin-top: 15%">
          <!-- 证明材料的照片 -->
          <el-upload
            class="avatar-uploader"
            action="http://localhost:5051/image/upload"
            :show-file-list="false"
            :on-success="handleProveImage"
            style="margin-left: 40%; margin-top: -13%"
          >
            <img
              v-if="form.supporting_material"
              :src="form.supporting_material"
              class="avatar"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submit()">
          确 定
        </el-button>
      </span>
    </el-dialog>

     <!-- 分页组件 -->
    <el-pagination
      @next-click="next"
      @prev-click="prev"
      :current-page="currentPage"
      :page-sizes="[8]"
      :page-size="size"
      layout="total, sizes, prev, pager, next"
      :total="total"
    >
    </el-pagination>

  </div>
</template>

<script>
import axios from "axios";
import commons from "../../../assets/commons";
export default {
  data() {
    return {
      //分页
      currentPage: 1, //当前页
      page: 1,
      total: 0, //总条数
      totalPage: 0, //总页数
      size: 8, //每页大小
      tableData: [], //数据集合
      
      //弹出框
      dialogVisible: false,

      id:"",

      //领养申请信息
      form: {
        //证件照
        icd_image: "",
        //本人半身照
        person_image: "",
        //证件类型
        ID_type: "身份证",
        //犬主姓名
        uname: "",
        //证件号码
        icd: "",
        //性别
        sex: "",
        //民族
        ethnic: "",
        //户籍地址
        domicile_address: "",
        //联系电话
        tel: "",
        //现住地
        now_address: "",
        //详细地址
        detailed_address: "",
        //证明材料
        supporting_material: "",
        //id外键
        adopt_id:"",
      },
    };
  },
  methods: {
    

    findAll( ){
      // if (this.type == "小型犬") {
        
      // } else if(this.type == "中型犬"){
        
      // } else if(this.type == "大型犬"){

      // }else {
            
      // }
      // if (this.sex == "公") {
        
      // } else if(this.sex == "母"){
        
      // }else {

      // }

      axios
        .get(commons.baseUrl + "user/convenient/findAllAdopt?page="+this.page+"&size="+this.size)
        .then(res => {

          console.log(res);
          this.tableData = res.data.datas;
          console.log(this.tableData);
          this.total = res.data.total;
          this.totalPage =res.data.totalPage
          this.currentPage = res.data.currentPage;
          this.size = res.data.size;

        });
    },

    //下一页
    next() {
      this.page = this.page + 1
      this.findAll();
      
    },

    //上一页
    prev() {
      this.page = this.page - 1;
      this.findAll();
    },

    adopt(row) {
      this.id = row.id;
      this.dialogVisible=true;
    },
    submit(){
      
      
      let adoptApply = this.form;
      console.log(adoptApply);
      axios.post(commons.baseUrl+"user/convenient/apply",adoptApply).then(res=>{

        console.log(res.data);

        this.$message(res.data.message);

      })

      axios.get(commons.baseUrl+"user/convenient/updateStatus?id="+this.id).
      then(res=>{

        console.log(res.data);

      })
      this.dialogVisible = false

    },
    //上传身份证照片成功的回调函数
    handleIcdImage(res, file) {
      console.log(res);
      this.form.icd_image = res.data;
    },
    //上传半身照的回调函数
    handlePersonImage(res, file) {
      console.log(res);
      this.form.person_image = res.data;
    },
    //上传证明材料的回调函数
    handleProveImage(res, file) {
      console.log(res);
      this.form.supporting_material = res.data;
    },
  },
  mounted() {
    this.findAll();
  },
  computed: {},
};
</script>
<style scoped>
.avatar {
  width: 150px;
  height: 150px;
  display: block;
}
</style>
